<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>todolist</title>
		<style type="text/css">
			.list_con {
				width: 600px;
				margin: 50px auto 0;
			}
			
			.inputtxt {
				width: 550px;
				height: 30px;
				border: 1px solid #ccc;
				padding: 0px;
				text-indent: 10px;
			}
			
			.inputbtn {
				width: 40px;
				height: 32px;
				padding: 0px;
				border: 1px solid #ccc;
			}
			
			.list {
				margin: 0;
				padding: 0;
				list-style: none;
				margin-top: 20px;
			}
			
			.list li {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
			}
			
			.list li span {
				float: left;
			}
			
			.list li a {
				float: right;
				text-decoration: none;
				margin: 0 10px;
			}
		</style>

	</head>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>

	<body>

		<div class="list_con">
			<h2>To do list</h2>
			<!--文本框-->
			<input type="text" name="" id="txt1" class="inputtxt">
			<!--添加按钮-->
			<input type="button" name="" value="增加" id="btn1" class="inputbtn">

			<ul id="list" class="list">

				<li>
					<span>学习html</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
				
				<li>
					<span>学习css</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
				<li>
					<span>学习javascript</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>

			</ul>

		</div>
	</body>
	<script type="text/javascript">
		$("#btn1").click(function(){
			// 获取到文本框
			var txt =  $("#txt1")
			// 获取到用户输入的内容
			var val = txt.val()
			
			var oLi = '<li>'+
					'<span>'+val+'</span>'+
					'<a href="javascript:;" class="up"> ↑ </a>'+
					'<a href="javascript:;" class="down"> ↓ </a>'+
					'<a href="javascript:;" class="del">删除</a>'+
				'</li>'
			
			// 在ul标签的末尾添加一个li标签
			$("#list").append(oLi)
			// 删除用户输入的文字
			txt.val('')
			// 文本框获取到焦点
			txt.focus()
			
		})
		
		// 删除
//		$('.del').click(function(){
//			// 找到删除标签的父亲，然后在进行删除
//			$(this).parent().remove()
//		})
// 删除标签的时候，不能删除新添加的标签，必须使用委托事件
        $('body').delegate('.del','click',function(){
        	$(this).parent().remove()
        })
        
        // 向上面移动
        $('body').delegate('.up','click',function(){
        	// 判断当前点击的对象的父亲的索引为啥是否是0，如果是0说明已经到顶了
        	if ($(this).parent().index() == 0) {
        		alert('亲，已经到顶，不要在点了')
        		return
        	} 
        	
        	// 获取当前点击对象的父类的上一条数据
//      	console.log($(this).parent().prev().before($(this).parent())) 
        	$(this).parent().prev().before($(this).parent())
        	
        })
        
        // 向下移动
        $('body').delegate('.down','click',function(){
        	
        	if ($(this).parent().index() == $("#list li").length -1 ) {
        		alert('已经到底，别点了')
        		return
        	}
        	
        	$(this).parent().next().after($(this).parent())
        	
        })
        
	</script>

</html>